<template>
  <a-card :bordered="false">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="充值奖励">
        <span>* 充值返现规则，修改后立即生效。</span>

        <a-table
          :columns="rechargeSettingsColumns"
          :data-source="rechargeSettingsData"
        >
          <template
            v-for="col in ['threshold_amount', 'reward']"
            :slot="col"
            slot-scope="amount, record"
          >
            <div :key="col">
              <a-input-number
                :disabled="record.button_loading"
                v-if="record.editable"
                :value="record[`${col}_value`] | formatAmount"
                @change="value => handleChange(value, record, `${col}_value`)"
              />
              <template v-else>
                {{ amount | formatAmount }}
              </template>
            </div>
          </template>

          <template slot="action" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a-button type="link" :loading="record.button_loading" @click="() => save(record)">保存</a-button>
                <a-button type="link" @click="() => cancel(record)" :disabled="record.button_loading">取消</a-button>
              </span>
              <span v-else>
                <a @click="() => edit(record)">编辑</a>
              </span>
            </div>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="每日下单奖励">
        <span>* 每日下单奖励规则，修改后立即生效。</span>

        <a-table
          :columns="dailyOrderSettingsColumns"
          :data-source="dailyOrderSettingsData"
        >
          <template
            v-for="col in ['threshold_amount', 'reward']"
            :slot="col"
            slot-scope="amount, record"
          >
            <div :key="col">
              <a-input-number
                :disabled="record.button_loading"
                v-if="record.editable"
                :value="record[`${col}_value`] | formatAmount"
                @change="value => handleChange(value, record, `${col}_value`)"
              />
              <template v-else>
                {{ amount | formatAmount }}
              </template>
            </div>
          </template>

          <template slot="action" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a-button type="link" :loading="record.button_loading" @click="() => save(record)">保存</a-button>
                <a-button type="link" @click="() => cancel(record)" :disabled="record.button_loading">取消</a-button>
              </span>
              <span v-else>
                <a @click="() => edit(record)">编辑</a>
              </span>
            </div>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="3" tab="每月下单奖励">
        <span>* 每月下单奖励规则，修改后立即生效。</span>

        <a-table
          :columns="monthlyOrderSettingsColumns"
          :data-source="monthlyOrderSettingsData"
        >
          <template
            v-for="col in ['threshold_amount', 'reward']"
            :slot="col"
            slot-scope="amount, record"
          >
            <div :key="col">
              <a-input-number
                :disabled="record.button_loading"
                v-if="record.editable"
                :value="record[`${col}_value`] | formatAmount"
                @change="value => handleChange(value, record, `${col}_value`)"
              />
              <template v-else>
                {{ amount | formatAmount }}
              </template>
            </div>
          </template>

          <template slot="action" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a-button type="link" :loading="record.button_loading" @click="() => save(record)">保存</a-button>
                <a-button type="link" @click="() => cancel(record)" :disabled="record.button_loading">取消</a-button>
              </span>
              <span v-else>
                <a @click="() => edit(record)">编辑</a>
              </span>
            </div>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="4" tab="晋升规则">
        <span>* 满足条件的代理会在3天后自动晋升。</span>

        <a-table
          :columns="[
            {
              title: '等级名称',
              dataIndex: 'level_name',
              key: 'level_name'
            },
            {
              title: '晋升总业绩',
              dataIndex: 'total_performance',
              key: 'total_performance'
            },
            {
              title: '备注',
              dataIndex: 'remark',
              key: 'remark'
            }
          ]"
          :data-source="[
            {
              level_name: '群主',
              total_performance: '> 20000',
              remark: '自营业绩 > 10000'
            },
            {
              level_name: '精英',
              total_performance: '> 200000',
              remark: '自营业绩 > 80000'
            },
            {
              level_name: '大咖',
              total_performance: '',
              remark: ''
            }
          ]"
        />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { getRewardSettings, updateRewardSettings } from '@/api/agent'
  import Vue from 'vue'

  export default {
    name: 'AgentRule',
    created () {
      this.initTable()
    },
    data () {
      return {
        rechargeSettingsColumns: [
          {
            title: '充值金额',
            dataIndex: 'threshold_amount',
            key: 'threshold_amount',
            scopedSlots: { customRender: 'threshold_amount' }
          },
          {
            title: '返现金额',
            dataIndex: 'reward',
            key: 'reward',
            scopedSlots: { customRender: 'reward' }
          },
          {
            title: '更新时间',
            dataIndex: 'updated_at',
            key: 'updated_at'
          },
          {
            title: '操作人员',
            dataIndex: 'operator.real_name',
            key: 'operator.id'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ],
        dailyOrderSettingsColumns: [
          {
            title: '业绩门槛',
            dataIndex: 'threshold_amount',
            key: 'threshold_amount',
            scopedSlots: { customRender: 'threshold_amount' }
          },
          {
            title: '奖励金额',
            dataIndex: 'reward',
            key: 'reward',
            scopedSlots: { customRender: 'reward' }
          },
          {
            title: '更新时间',
            dataIndex: 'updated_at',
            key: 'updated_at'
          },
          {
            title: '操作人员',
            dataIndex: 'operator.real_name',
            key: 'operator.id'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ],
        monthlyOrderSettingsColumns: [
          {
            title: '业绩门槛',
            dataIndex: 'threshold_amount',
            key: 'threshold_amount',
            scopedSlots: { customRender: 'threshold_amount' }
          },
          {
            title: '奖励金额',
            dataIndex: 'reward',
            key: 'reward',
            scopedSlots: { customRender: 'reward' }
          },
          {
            title: '更新时间',
            dataIndex: 'updated_at',
            key: 'updated_at'
          },
          {
            title: '操作人员',
            dataIndex: 'operator.real_name',
            key: 'operator.id'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ],
        rechargeSettingsData: [],
        dailyOrderSettingsData: [],
        monthlyOrderSettingsData: []
      }
    },
    methods: {
      handleChange (value, record, col) {
        record[col] = value * 100 // 后端单位是分
      },
      save (record) {
        Vue.set(record, 'button_loading', true)
        updateRewardSettings({
          id: record.id,
          threshold_amount: record.threshold_amount_value,
          reward: record.reward_value
        }).then(res => {
          this.$message.success('操作成功!')
          this.initTable()
        }).finally(_ => {
          Vue.set(record, 'editable', false)
        })
      },
      cancel (record) {
        Vue.set(record, 'editable', false)
      },
      edit (record) {
        // 初始化 input 用的值
        record.threshold_amount_value = record.threshold_amount
        record.reward_value = record.reward

        Vue.set(record, 'button_loading', false)
        Vue.set(record, 'editable', true)
      },
      initTable () {
        getRewardSettings().then(res => {
          this.rechargeSettingsData = []
          this.dailyOrderSettingsData = []
          this.monthlyOrderSettingsData = []

          res.forEach(item => {
            // 初始化 input 用的值
            item.threshold_amount_value = item.threshold_amount
            item.reward_value = item.reward

            switch (item.type) {
              case 1:
                this.rechargeSettingsData.push(item)
                break
              case 2:
                this.dailyOrderSettingsData.push(item)
                break
              case 3:
                this.monthlyOrderSettingsData.push(item)
                break
            }
          })
        })
      }
    }
  }
</script>

<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
